<template>
  <el-container v-loading="loading" element-loading-text="服务中断，重连中…" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="app-container" style="height: 100%">
    <el-main class="page-home">
      <div class="page-home-header" style="border-bottom">
        <div class="home-title">车辆实时信息</div>
        <ShowTime :style-obj="{ color: '#0ebfbf', 'font-size': '28px' }" />
      </div>
      <el-card class="box-card" style="margin-top: 10px" :body-style="{ padding: '0px 20px 20px 20px' }">
        <div class="map-header">
          <el-button v-if="train_lists[1] > 0" @click="train_lists = [0, -1]" style="color: blue"> 取消跟踪 </el-button>
          <div class="block" label-width="70px" style="width: 180px; z-index: 9999; padding: 10px; color: #000; background-color: transparent; margin-left: 130px; margin-top: 5px">
            <!-- <span class="demonstration" style="color: #f4f4f5;">跟踪机车</span> -->
            <!-- <el-dialog
  title="提示"
  :append-to-body='true'
  :visible.sync="requestState"
  :close-on-click-modal = "false"
  width="30%"
  :before-close="handleClose">
  <span>获取请求失败，是否要刷新页面</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="requestState = false">忽 略</el-button>
    <el-button type="primary" @click="reFreshHtml">刷 新</el-button>
  </span>
  </el-dialog> -->

            <div class="table-wrapper">
              <el-cascader v-model="train_lists" :options="train_options" :props="{ expandTrigger: 'hover' }" placeholder="跟踪列车" @change="handleChange" clearable></el-cascader>
            </div>
          </div>

          <el-divider direction="vertical"></el-divider>
          <div class="station-choose">
            <div class="prev-station" @click="clickPrevStation" style="color: #f4f4f5">
              <span style="marginright: 6px; height: 21px">{{ prevStationName }}</span>
              <i class="iconfont icon-a-jiantou"></i>
            </div>
            <div class="cur-station">
              <el-dropdown @command="changeCurStation">
                <span class="el-dropdown-link" style="fontsize: 28px; fontweight: 700; color: #f4f4f5">
                  {{ curStationName }}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="(v, i) in this.allStationNames" :key="i" :command="i">{{ v }}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="next-station" @click="clickNextStation" style="color: #f4f4f5">
              <i class="iconfont icon-jiantou"></i>
              <span style="marginleft: 6px; height: 21px">{{ nextStationName }}</span>
            </div>
          </div>
          <el-divider direction="vertical"></el-divider>
          <!-- <div style="top:45px;z-index:999999;">
          <button id="reset">还原</button>
          <button id="zoomIn">缩小</button>
          <button id="zoomOut">放大</button>
          <button id="translateX">向右平移</button>
          <button id="translateY">向下平移</button>
        </div> -->
          <!-- <div class="btn-area">
    <button id="scroll-up">↑</button>
    <button id="scroll-down">↓</button>
    <button id="scroll-left">←</button>
    <button id="scroll-right">→</button>
    <button id="scale-up">＋</button>
    <button id="scale-down">－</button>
    <button id="reset-btn">♨</button>
      </div> -->
          <div class="zoom-box">
            <!-- <span>缩放等级</span>
          <el-slider
            v-model="zoomLevel"
            :step="16"
            show-stops
            :format-tooltip="formatZoomLevel"
            style="width:100px;margin:0 20px;"
            @input="zoomChange"
          ></el-slider> -->
          </div>
        </div>
        <div class="map-body" style="overflow: hidden">
          <icon name="iSTP"></icon>
          <!-- <el-scrollbar ref="scrollDiv" style="height:100%" wrap-style="overflow-y:hidden;"> -->
          <div id="svgTemplate" ref="svg" v-html="svgString" style="height: 100%; background-color: #000"></div>
          <!-- </el-scrollbar> -->
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>

<!-- <script src="./jquery-1.11.2.js"></script>
<script src="js/jquery.svg.pan.zoom.js"></script>
  <script>
  src="./jquery-1.11.2.js"
  src="js/jquery.svg.pan.zoom.js"
        $(document).ready(function () {
        var svgPanZoom = $("svg").svgPanZoom()
        $("#reset-btn").click(function(){
            svgPanZoom.reset()
        });

        $("#scale-up").click(function(){
            svgPanZoom.zoomIn()
        });


        $("#scale-down").click(function(){
            svgPanZoom.zoomOut()
        });

        $("#scroll-up").click(function(){
          console.log('1qa')
            svgPanZoom.panUp()
        });

        $("#scroll-down").click(function(){
            svgPanZoom.panDown()
        });

        $("#scroll-left").click(function(){
            svgPanZoom.panLeft()
        });

        $("#scroll-right").click(function(){
            svgPanZoom.panRight()
        });
    });
  </script> -->



<script>
document.onselectstart = function () {
  return false
}
// import $ from 'jquery'
// import layer from "layui-layer";
import Panzoom from '@panzoom/panzoom'

import Vue from 'vue/dist/vue.esm.js'
import { getStationMap, getStationGeo, getStationInfos, getDSS, TWS, getStatus, getTrainPageInfos, getLineData } from '@/api/station'
import * as d3 from 'd3' //在vue文件里面引入d3
import { createNamespacedHelpers } from 'vuex'
import axios from 'axios'
import { mapGetters } from 'vuex'
import ShowTime from '@/components/ShowTime'
import { Script } from 'vm'
import { first } from 'lodash'
Vue.prototype.axios = axios
const deviceStateStore = createNamespacedHelpers('deviceState')

const MASK_LAMPA_COLOR = 0x0000000f
const MASK_LAMPB_COLOR = 0x000000f0
const MASK_LAMPA_BLINK = 0x00000100
const MASK_LAMPB_BLINK = 0x00000200
const MASK_LAMP_CLOSE = 0x00000400
const MASK_SWITCH_SPLIT = 0x00000008
const MASK_SWITCH_NR = 0x00000010
const MASK_TRACK_OCCUPY = 0x00000001
const MASK_TRACK_LOCK = 0x00000002

const stateClassArray = ['Free', 'Occupy', 'Lock', 'None']
const colorClassArray = ['None', 'Red', 'Green', 'Yellow', 'White', 'Blue', 'Gray', 'Blink']
// const colorClassArray = ['Red', 'Green', 'Yellow', 'White', 'Blue', 'Gray']
const switchClassArray = ['Normal', 'Reverse', 'SiKai', 'Unknown']

const zoomLevelPara = { 0: 0.3, 16: 0.65, 32: 1, 48: 1.4, 64: 1.8, 80: 2.2, 96: 3 }

export default {
  name: 'sta',
  components: {
    ShowTime
  },
  data() {
    return {
      require: {
        //需要订阅的频道放在这里
        channels: [],
        //发出申请的组件名字放在这里
        component: 'station'
      },
      loading: false,
      netState: 'connect',
      requestState: false,
      trainNolist: [],
      station_rightIsDown: {},
      wftSvg: '',
      offsetX_1: 0,
      offsetY_1: 0,
      offsetX_2: 0,
      offsetY_2: 0,
      train_lists: [0, -1],
      train_list_stationmap: [],
      train_options: [],
      train_stationname_list: [],
      stationLineData: {},
      svgString: '',
      svgDom: null,
      allDom: null,
      svgString: '',
      svg: null,
      innerSvg: null,
      trainField: null,
      trailEntity: null,
      curStationIdx: 0,
      prevStationName: '无',
      curStationName: '请选站',
      nextStationName: '无',
      allStationNames: [],
      allStationNames_1: {},
      allStationPosition: [{}, { x: '3509', y: '779', width: '959', height: '935' }, { x: '2355', y: '1269', width: '257', height: '410' }, { x: '396', y: '1269', width: '1207', height: '963' }, {}],
      zoomLevel: 32,
      elementsClassType: [
        { class: 'signal1', type: 'sig1', typeIdx: 0 },
        { class: 'signal2', type: 'sig2', typeIdx: 0 },
        { class: 'switch', type: 'switch', typeIdx: 1 },
        { class: 'track', type: 'track', typeIdx: 2 }
      ],
      test_data: {
        stationNo: 12,
        tracks: [
          {
            dname: '1G',
            dstate: 1
          },
          {
            dname: '2G',
            dstate: 1
          }
        ],
        signals: [
          {
            dname: 'X1',
            dstate: 0
          },
          {
            dname: 'S1',
            dstate: 0
          }
        ],
        switchs: [
          {
            dname: '1',
            dstate: 1
          },
          {
            dname: '2',
            dstate: 1
          }
        ]
      },

      new_test_data: {
        stationNo: 12,
        devices: [
          {
            dtype: 'track',
            dname: '1G',
            dstate: 1
          },
          {
            dtype: 'signal',
            dname: 'X1',
            dstate: 1
          },
          {
            dtype: 'switch',
            dname: '2',
            dstate: 1
          }
        ]
      },
      train_station_list: [],
      train_data: {
        deviceId: 1234,
        deviceType: 1,
        speed: 1000,
        handle: 1,
        mode: 1,
        dir: 2,
        upDownDir: 1,
        stationNo: 12,
        coverRoute: [
          {
            stationNo: 12,
            dType: 'track',
            dname: '6G'
          },
          {
            stationNo: 12,
            dType: 'switch',
            dname: '1',
            part: 'previous'
          }
        ],
        end1: {
          index: 0,
          offset: 50
        },
        end2: {
          index: 1,
          offset: -1
        },
        trainHead: 'end1'
      },

      train_data_2: {
        deviceId: 1234,
        deviceType: 1,
        speed: 1000,
        handle: 1,
        mode: 1,
        dir: 2,
        upDownDir: 1,
        stationNo: 12,
        coverRoute: [
          {
            stationNo: 12,
            dType: 'track',
            dname: '6G'
          },
          {
            stationNo: 12,
            dType: 'switch',
            dname: '1',
            part: 'previous'
          }
        ],
        end1: {
          index: 0,
          offset: 70
        },
        end2: {
          index: 1,
          offset: 30
        },
        trainHead: 'end1'
      },
      state: 0,
      train_data_3: {
        deviceId: 1235,
        deviceType: 1,
        speed: 1000,
        handle: 1,
        mode: 1,
        dir: 2,
        upDownDir: 1,
        stationNo: 12,
        coverRoute: [
          {
            stationNo: 12,
            dType: 'track',
            dname: '6G'
          },
          {
            stationNo: 12,
            dType: 'switch',
            dname: '1',
            part: 'previous'
          }
        ],
        end1: {
          index: 0,
          offset: 7
        },
        end2: {
          index: 1,
          offset: 6
        },
        trainHead: 'end1'
      },

      variables: {}
    }
  },
  created() {
    // this.renderOneStationDevices(this.test_data);
  },
  mounted() {
    this.$store.subscribe(() => {
      if (this.$store.getters.serverStatus != 1 && this.netState == 'connect') {
        this.netState = 'reconnect'
        this.loading = true
        var interval = setInterval(() => {
          if (this.$store.getters.serverStatus == 1) {
            this.netState = 'connect'
            this.loading = false
            clearInterval(interval)

            getStationInfos()
              .then(response => {
                if (response.code == 0) {
                  {
                    getStatus()
                      .then(response => {
                        if (response.code == 0)
                          for (var key_ in response.data) {
                            {
                              if (response.data[key_] == 0) {
                                getDSS(key_)
                                  .then(response => {
                                    if (response.code == 0) this.renderOneStationDevices(response.data, response.data)
                                    else this.requestState = true
                                  })
                                  .catch(error => {
                                    if (error.message.includes('timeout')) {
                                      this.requestState = true
                                    }
                                  })
                              } else {
                                var data = {}
                                data.stationNo = key_
                                this.renderOneStationDevices(this.stationLineData[key_], data)
                              }
                            }
                          }
                        else this.requestState = true
                      })
                      .catch(error => {
                        if (error.message.includes('timeout')) {
                          this.requestState = true
                        }
                      })
                  }

                  var i = 0
                  for (var key in this.train_stationname_list) {
                    this.train_options.push('{}')
                    this.train_options.pop()
                    this.train_options[key] = {
                      value: 1,
                      label: 1,
                      children: []
                    }
                    this.train_options[key].value = key
                    this.train_options[key].label = this.train_stationname_list[key] + ' ( 0 )'
                    this.train_options[key].children = []
                  }

                  TWS(1)
                    .then(response => {
                      if (response.code == 0) {
                        //  debugger
                        let that = this

                        var score
                        var length = 0

                        that.train_station_list = []
                        for (const key in response.data.deviceInfos) {
                          score = 1
                          for (var i = 0; i < length; i++) {
                            if (response.data.deviceInfos[key] == that.train_station_list[i][0]) {
                              that.train_station_list[i].push(key)
                              score = 0
                            }
                          }
                          if (score == 1) {
                            that.train_station_list[i] = []
                            that.train_station_list[i].push(response.data.deviceInfos[key])
                            that.train_station_list[i].push(key)
                            length = length + 1
                          }
                          var train_name = 'TrainRTInfo:' + key + '_1'
                          var trainwarn_name = 'TrainPreWarnInfo:' + key + '_1'
                          if (!that.require.channels.includes(train_name)) {
                            that.require.channels.push(train_name)
                            that.require.channels.push(trainwarn_name)
                            that.$bus.$emit('Subscribe', that.require)
                            that.sockets.subscribe(train_name, res => {
                              // console.log(res.data.devices)
                              that.renderTrainDevice(res.data)
                            })
                            that.sockets.subscribe(trainwarn_name, res => {
                              // console.log(res.data.devices)
                            })
                          }
                        }

                        that.train_station_list.length = length
                        for (var j = 0; j < length; j++) {
                          for (var key in this.train_options) {
                            that.train_options[key].children = []
                          }
                          for (var l in that.train_options) {
                            if (that.train_options[l].value == that.train_station_list[j][0]) {
                              for (var i = 1; i < that.train_station_list[j].length; i++) {
                                that.train_options.push('{}')
                                that.train_options.pop()
                                that.train_options[l].children[i - 1] = {
                                  value: 1,
                                  label: 1
                                }
                                that.train_options[l].children[i - 1].value = that.train_station_list[j][i]
                                that.train_options[l].children[i - 1].label = that.trainNolist[that.train_station_list[j][i]]
                              }
                            }
                            that.train_options[l].label = that.train_stationname_list[l] + ' ( ' + that.train_options[l].children.length + ' )'
                          }
                        }
                      } else this.requestState = true
                    })
                    .catch(error => {
                      if (error.message.includes('timeout')) {
                        this.requestState = true
                      }
                    })
                } else this.requestState = true
              })
              .catch(error => {
                if (error.message.includes('timeout')) {
                  this.requestState = true
                }
              })
          }
        }, 1000)
      }
    })

    getStationMap()
      .then(response => {
        if (response.code == 0) {
          this.wftSvg = response.data
          this.getSvg(this.wftSvg)
          getLineData()
            .then(response => {
              if (response.code == 0) {
                for (var key in response.data) {
                  this.station_rightIsDown[key] = response.data[key].baseInfo.rightIsDown
                  this.stationLineData[key] = { stationNo: '', signals: {}, switchs: {}, tracks: {} }
                  this.stationLineData[key].stationNo = key
                  for (var key1 in response.data[key].signals) this.stationLineData[key].signals[response.data[key].signals[key1].name] = 0
                  for (var key2 in response.data[key].switchs) this.stationLineData[key].switchs[response.data[key].switchs[key2].name] = -1
                  for (var key3 in response.data[key].tracks) this.stationLineData[key].tracks[response.data[key].tracks[key3].name] = -1
                }

                for (var key in response.data) {
                  for (var i = 0; i < response.data[key].tracks.length; i++) {
                    var track_name = '#S' + key + '_' + response.data[key].tracks[i].name
                    track_name = track_name.replace(/\//g, '\\/')
                    if (d3.select(track_name)) d3.select(track_name).select('#track').attr('length', response.data[key].tracks[i].len)
                  }
                  for (var i = 0; i < response.data[key].switchs.length; i++) {
                    var switch_name = '#S' + key + '_' + response.data[key].switchs[i].name
                    d3.select(switch_name).attr('dir_type', response.data[key].switchs[i].dirType)
                    d3.select(switch_name).select('#common').attr('length', response.data[key].switchs[i].prevLen)
                    d3.select(switch_name).select('#reverse').attr('length', response.data[key].switchs[i].reverseLen)
                    d3.select(switch_name).select('#normal').attr('length', response.data[key].switchs[i].normalLen)
                  }
                }
              } else this.requestState = true
            })
            .catch(error => {
              if (error.message.includes('timeout')) {
                this.requestState = true
              }
            })
          getTrainPageInfos()
            .then(response => {
              if (response.code === 0) {
                this.trainNolist = new Map()
                for (var i = 0; i < response.data.length; i++) {
                  if (response.data[i].deviceType == 1) {
                    if (response.data[i].trainNo) this.trainNolist[response.data[i].deviceId] = response.data[i].trainNo
                    else this.trainNolist[response.data[i].deviceId] = response.data[i].deviceId
                  }
                }
              } else this.requestState = true

              getStationInfos()
                .then(response => {
                  if (response.code == 0) {
                    this.train_stationname_list = new Map()
                    getStatus(key)
                      .then(response => {
                        if (response.code == 0)
                          for (var key_ in response.data) {
                            {
                              if (response.data[key_] == 0) {
                                getDSS(key_)
                                  .then(response => {
                                    if (response.code == 0) this.renderOneStationDevices(response.data, response.data)
                                    else this.requestState = true
                                  })
                                  .catch(error => {
                                    if (error.message.includes('timeout')) {
                                      this.requestState = true
                                    }
                                  })
                              } else {
                                var data = {}
                                data.stationNo = key
                                this.renderOneStationDevices(this.stationLineData[key], data)
                              }
                            }
                          }
                        else this.requestState = true
                      })
                      .catch(error => {
                        if (error.message.includes('timeout')) {
                          this.requestState = true
                        }
                      })

                    for (var key in response.data) {
                      this.train_stationname_list[key] = response.data[key].name
                      var station_dss_name = 'StationDSS:' + key
                      this.require.channels.push(station_dss_name)
                      this.require.channels.push('StationStatus:DSS')
                      this.$bus.$emit('Subscribe', this.require)
                      // 接收数据
                      this.sockets.subscribe(station_dss_name, res => {
                        this.renderOneStationDevices(res.data, res.props)
                      })
                      this.sockets.subscribe('StationStatus:DSS', res => {
                        for (var key in res.data)
                          if (res.data[key] != 0) {
                            var data = {}
                            data.stationNo = key
                            this.renderOneStationDevices(this.stationLineData[key], data)
                          }
                      })
                    }

                    var i = 0
                    for (var key in this.train_stationname_list) {
                      this.train_options.push('{}')
                      this.train_options.pop()
                      this.train_options[key] = {
                        value: 1,
                        label: 1,
                        children: []
                      }
                      this.train_options[key].value = key
                      this.train_options[key].label = this.train_stationname_list[key] + ' ( 0 )'
                      this.train_options[key].children = []
                    }

                    TWS(1)
                      .then(response => {
                        var data = {}
                        data.stationNo = 23

                        console.log(this.stationLineData[23])
                        this.renderOneStationDevices(this.stationLineData[23], data)
                        if (response.code == 0) {
                          //  debugger
                          let that = this

                          var score
                          var length = 0

                          that.train_station_list = []
                          for (const key in response.data.deviceInfos) {
                            score = 1
                            for (var i = 0; i < length; i++) {
                              if (response.data.deviceInfos[key] == that.train_station_list[i][0]) {
                                that.train_station_list[i].push(key)
                                score = 0
                              }
                            }
                            if (score == 1) {
                              that.train_station_list[i] = []
                              that.train_station_list[i].push(response.data.deviceInfos[key])
                              that.train_station_list[i].push(key)
                              length = length + 1
                            }
                            var train_name = 'TrainRTInfo:' + key + '_1'
                            var trainwarn_name = 'TrainPreWarnInfo:' + key + '_1'
                            if (!that.require.channels.includes(train_name)) {
                              that.require.channels.push(train_name)
                              that.require.channels.push(trainwarn_name)
                              that.$bus.$emit('Subscribe', that.require)
                              that.sockets.subscribe(train_name, res => {
                                // console.log(res.data.devices)
                                that.renderTrainDevice(res.data)
                              })
                              that.sockets.subscribe(trainwarn_name, res => {
                                // console.log(res.data.devices)
                              })
                            }
                          }

                          that.train_station_list.length = length
                          for (var j = 0; j < length; j++) {
                            for (var key in this.train_options) {
                              that.train_options[key].children = []
                            }
                            for (var l in that.train_options) {
                              if (that.train_options[l].value == that.train_station_list[j][0]) {
                                for (var i = 1; i < that.train_station_list[j].length; i++) {
                                  that.train_options.push('{}')
                                  that.train_options.pop()
                                  that.train_options[l].children[i - 1] = {
                                    value: 1,
                                    label: 1
                                  }
                                  that.train_options[l].children[i - 1].value = that.train_station_list[j][i]
                                  that.train_options[l].children[i - 1].label = that.trainNolist[that.train_station_list[j][i]]
                                }
                              }
                              that.train_options[l].label = that.train_stationname_list[l] + ' ( ' + that.train_options[l].children.length + ' )'
                            }
                          }
                        } else this.requestState = true
                      })
                      .catch(error => {
                        if (error.message.includes('timeout')) {
                          this.requestState = true
                        }
                      })
                    this.allStationNames.push('所有站')
                    this.allStationNames_1['所有站'] = 0
                    for (var key in response.data) {
                      var stationname = '#S' + response.data[key].id + '_stationName'
                      var stationinfodata = d3.select(stationname)
                      if (stationinfodata._groups[0][0] != null) {
                        this.allStationNames.push(response.data[key].name)
                        this.allStationNames_1[response.data[key].name] = response.data[key].id
                      }
                    }
                    this.allStationNames.push('所有站')
                  } else this.requestState = true
                })
                .catch(error => {
                  if (error.message.includes('timeout')) {
                    this.requestState = true
                  }
                })
            })
            .catch(error => {
              if (error.message.includes('timeout')) {
                this.requestState = true
              }
            })
          this.require.channels.push('TWS_Entitys:Train')
          this.$bus.$emit('Subscribe', this.require)

          this.sockets.subscribe('TWS_Entitys:Train', res => {
            // console.log(res.data.devices)
            let that = this
            var length = 0
            var score = 1
            var state
            if (res.props.type == 'sync' || res.props.type == 'add') {
              this.createTrain(res)
            }
            if (res.props.type == 'change') {
              for (var key in res.data.deviceInfos) {
                for (var i in that.train_station_list) {
                  var lenght = that.train_station_list[i].length
                  for (var j = 1; j < lenght; j++)
                    if (key == that.train_station_list[i][j]) {
                      that.train_station_list[i].splice(that.train_station_list[i].indexOf(key), 1)
                    }
                }
                var state = 0
                for (var i in that.train_station_list) if (that.train_station_list[i][0] == res.data.deviceInfos[key]) state = 1
                if (state == 0) {
                  that.train_station_list[response.data.deviceInfos[key]] = []
                  that.train_station_list[response.data.deviceInfos[key]].push(response.data.deviceInfos[key])
                  that.train_station_list[response.data.deviceInfos[key]].push(key)
                }

                for (var key in res.data.deviceInfos)
                  if (res.data.deviceInfos[key] != 0) {
                    this.createTrain(res)
                    if (this.train_lists[1] == key) {
                      this.train_lists[0] = String(res.data.deviceInfos[key])
                      this.train_lists[1] = key
                    }
                  } else {
                    if (this.train_lists[1] == key) {
                      this.train_lists = [0, -1]
                    }

                    this.deleteTrain(res)
                  }
              }

              for (var key in res.data.deviceInfos)
                if (res.data.deviceInfos[key] != 0) {
                  this.createTrain(res)
                  if (this.train_lists[1] == key) {
                    this.train_lists[0] = String(res.data.deviceInfos[key])
                    this.train_lists[1] = key
                  }
                } else this.deleteTrain(res)
            }
            if (res.props.type == 'delete') {
              this.deleteTrain(res)
            }

            for (var key in this.train_options) {
              this.train_options[key].children = []
            }
            for (var j in this.train_station_list) {
              for (var k = 1; k < this.train_station_list[j].length; k++) {
                if (this.train_station_list[j][0] > 0) {
                  this.train_options[this.train_station_list[j][0]].children[k - 1] = {
                    value: 1,
                    label: 1
                  }
                  this.train_options.push('{}')
                  this.train_options.pop()
                  this.train_options[this.train_station_list[j][0]].children[k - 1].value = this.train_station_list[j][k]
                  this.train_options[this.train_station_list[j][0]].children[k - 1].label = this.trainNolist[this.train_station_list[j][k]]
                }
              }
              if (this.train_station_list[j][0] > 0) this.train_options[this.train_station_list[j][0]].label = this.train_stationname_list[this.train_station_list[j][0]] + ' ( ' + this.train_options[this.train_station_list[j][0]].children.length + ' )'
            }
          })
        } else this.requestState = true
      })
      .catch(error => {
        if (error.message.includes('timeout')) {
          this.requestState = true
        }
      })

    //  this.MouseD3();
    // //  svg 点击事件
    window['handleClick'] = function (e, currNodeId) {
      let tag = e.srcElement || e.target
    }
  },

  beforeDestroy() {
    for (var i = 0; i < this.require.channels.length; i++) {
      this.sockets.unsubscribe(this.require.channels[i])
      console.log('this.require.channels[i]')
    }
  },

  methods: {
    reFreshHtml() {
      this.$router.go(0)
    },

    deleteTrain(res) {
      let that = this
      for (const key in res.data.deviceInfos) {
        {
          {
            {
              var old_1 = '#T' + key + '_1'
              var old_2 = '#T' + key + '_2'
              var old_train1 = '#T' + key + '_text1'
              var old_train2 = '#T' + key + '_text2'
              var old_train1_1 = '#T' + key + '_text1_1'
              var old_train1_2 = '#T' + key + '_text1_2'
              var old_train1_3 = '#T' + key + '_text1_3'
              var old_train1_4 = '#T' + key + '_text1_4'
              var old_train2_1 = '#T' + key + '_text2_1'
              d3.select(old_1).remove()
              d3.select(old_train1).remove()
              d3.select(old_train2).remove()
              d3.select(old_train1_1).remove()
              d3.select(old_train1_2).remove()
              d3.select(old_train1_3).remove()
              d3.select(old_train1_4).remove()
              d3.select(old_train2_1).remove()
              d3.select(old_2).remove()
              // let Layers = that.layerGroup.locomotiveLayerGroup.getLayers();      //11.3 添加删除列车操作
              //   Layers.map(function (layer){
              //  if(layer.id==key)
              //   {
              //     that.layerGroup.locomotiveLayerGroup.removeLayer(layer)
              //   }
              // })

              var train_name = 'TrainRTInfo:' + key + '_1'
              var trainwarn_name = 'TrainPreWarnInfo:' + key + '_1'
              // that.$bus.$emit('Unsubscribe', that.require)
              that.sockets.unsubscribe(train_name)
              that.sockets.unsubscribe(trainwarn_name)
              for (var i = 0; i < that.require.channels.length; i++) {
                if (that.require.channels[i] == train_name) that.require.channels.splice(that.require.channels.indexOf(train_name), 1)
                if (that.require.channels[i] == trainwarn_name) that.require.channels.splice(that.require.channels.indexOf(trainwarn_name), 1)
              }
            }
          }
        }
      }
    },
    createTrain(res) {
      let that = this

      for (const key in res.data.deviceInfos) {
        var score = 1
        for (var i in that.train_station_list) {
          if (res.data.deviceInfos[key] == that.train_station_list[i][0]) {
            var state = 0
            for (const c in that.train_station_list[i]) if (key == that.train_station_list[i][c]) state = 1
            if (state == 0) {
              that.train_station_list[i].push(key)
              // if(that.station_sub_list.includes(that.person_station_list[i][0]))  //11.3修改车辆订阅逻辑
              {
                var train_name = 'TrainRTInfo:' + key + '_1'
                var trainwarn_name = 'TrainPreWarnInfo:' + key + '_1'
                if (!that.require.channels.includes(train_name)) {
                  that.require.channels.push(train_name)
                  that.require.channels.push(trainwarn_name)
                  that.$bus.$emit('Subscribe', that.require)
                  that.sockets.subscribe(train_name, res => {
                    that.renderTrainDevice(res.data)
                  })
                  that.sockets.subscribe(trainwarn_name, res => {})
                }
              }
            }
            score = 0
          }
        }
        if (i) i++
        else i = 0
        if (score == 1) {
          that.train_station_list[i] = []
          that.train_station_list[i].push(res.data.deviceInfos[key])
          that.train_station_list[i].push(key)
          //if(that.station_sub_list.includes(that.train_station_list[i][0]))  //11.4修改无车站订阅逻辑
          {
            var train_name = 'TrainRTInfo:' + key + '_1'
            var trainwarn_name = 'TrainPreWarnInfo:' + key + '_1'
            if (!that.require.channels.includes(train_name)) {
              that.require.channels.push(train_name)
              that.require.channels.push(trainwarn_name)
              that.$bus.$emit('Subscribe', that.require)
              that.sockets.subscribe(train_name, res => {
                // console.log(res.data.devices)
                that.renderTrainDevice(res.data)
              })
              that.sockets.subscribe(trainwarn_name, res => {
                // console.log(res.data.devices)
              })
            }
          }
        }
      }

      for (var key in this.train_options) {
        this.train_options[key].children = []
        this.train_options[key].label = this.train_stationname_list[key] + ' ( 0 )'
      }
      for (var j in this.train_station_list) {
        for (var k = 1; k < this.train_station_list[j].length; k++) {
          if (this.train_station_list[j][0] > 0) {
            this.train_options[this.train_station_list[j][0]].children[k - 1] = {
              value: 1,
              label: 1
            }
            this.train_options.push('{}')
            this.train_options.pop()
            this.train_options[this.train_station_list[j][0]].children[k - 1].value = this.train_station_list[j][k]
            this.train_options[this.train_station_list[j][0]].children[k - 1].label = this.trainNolist[this.train_station_list[j][k]]
          }
        }
        if (this.train_station_list[j][0] > 0) this.train_options[this.train_station_list[j][0]].label = this.train_stationname_list[this.train_station_list[j][0]] + ' ( ' + this.train_options[this.train_station_list[j][0]].children.length + ' )'
      }
    },

    selectChanged(value) {
      //10.13修改列车跟踪逻辑

      this.curStationName = '请选择车站'
      // var x1=parseInt(d3.select('#T'+value+"_text1").attr('x'))-parseInt(300)
      // var y1=parseInt(d3.select('#T'+value+"_text1").attr('y'))-parseInt(150)
      // console.log(d3.select('#iSTP').attr('viewBox', x1+' '+y1+' '+500+' '+300))
      var x = -d3.select('#T' + value + '_text1').attr('x') * 4 + ((document.getElementById('svgTemplate').clientWidth - 17) / 2) * 3.33333 - 120
      var y = -d3.select('#T' + value + '_text1').attr('y') * 4 + ((document.getElementById('svgTemplate').clientHeight - 17) / 2) * 3.33333 - 120

      d3.select('#iSTP').attr('transform', 'translate(' + x + ',' + y + ') scale(4)')
    },

    changeCurStation(idx) {
      this.train_lists = [0, -1]
      this.train_lists[1] = this.$router.currentRoute.query.deviceId
      this.curStationIdx = idx
      this.curStationName = this.allStationNames[idx]
      if (this.curStationName == '所有站') {
        d3.select('#iSTP').attr('transform', 'translate(0,0) scale(1.65)')
        d3.select('#iSTP').attr('style', 'background-color: rgb(0, 0, 0); border: 0px solid yellow;zoom:0.3')
      }
      var stationname = '#S' + this.allStationNames_1[this.curStationName] + '_stationName'

      var x = -d3.select(stationname).select('text').attr('x') * 4 + ((document.getElementById('svgTemplate').clientWidth - 17) / 2) * 3.33333 - 120
      var y = -d3.select(stationname).select('text').attr('y') * 4
      this.zoomLevel = 0
      if (this.curStationName != '所有站') d3.select('#iSTP').attr('transform', 'translate(' + x + ',' + y + ') scale(4)')
      if (idx === 0) {
        this.prevStationName = '无'
      } else {
        this.prevStationName = this.allStationNames[idx - 1]
      }
      if (idx === this.allStationNames.length - 1) {
        this.nextStationName = '无'
      } else {
        this.nextStationName = this.allStationNames[idx + 1]
      }
      this.state = 1
    },
    clickPrevStation() {
      if (this.curStationIdx !== 0) {
        this.changeCurStation(this.curStationIdx - 1)
      }
    },
    clickNextStation() {
      if (this.curStationIdx !== this.allStationNames.length - 1) {
        this.changeCurStation(this.curStationIdx + 1)
      }
    },
    formatZoomLevel(val) {
      return val / 16
    },
    zoomChange(val) {
      d3.select('#iSTP').attr('style', 'background-color: rgb(0, 0, 0); border: 0px solid yellow;zoom:' + zoomLevelPara[val])
      // console.log(d3.select('#iSTP').attr('style','background-color: rgb(0, 0, 0); border: 0px solid yellow;zoom:'+zoomLevelPara[val]))
    },
    getSvg(data) {
      let that = this
      const xhr = new XMLHttpRequest()
      xhr.open('GET', 'http://192.168.201.105:9527/#/linedata/stationMapData', true)
      // xhr.send();
      {
        const resXML = this.stringToXml(data) //  this.stringToXml(xhr.responseXML)

        this.svgDom = resXML.documentElement.cloneNode(true) // 克隆节点
        // const resXML = xhr.responseXML  //  this.stringToXml(xhr.responseXML)
        // this.svgDom = xhr.responseXML// 克隆节点
        // const resXML = (xhr.responseXML);
        // console.log(xhr.responseXML)
        // console.log(xhr.response)
        // this.svgDom = resXML.documentElement.cloneNode(true);
        // console.log(this.svgDom);
        // console.log(this.svgDom, '----->>>')
        // 为 svg - dom 设置宽高边框样式
        // this.svgDom.style.width = "100%";
        // this.svgDom.style.height = "40vh";
        this.svgDom.style.border = '0px solid yellow'
        // 为svg添加鼠标滚动缩放事件

        this.svgDom.setAttribute('transform-origin', '0 0') //10.13添加
        // svg - a
        let adomNodeAll = this.svgDom.getElementsByTagName('a')
        //  循环修改节点样式 添加事件
        for (let i = 0; i < adomNodeAll.length; i++) {
          adomNodeAll[i].style.cursor = 'pointer' // 修改节点样式
          let currNodeId = adomNodeAll[i].getAttribute('id')
          adomNodeAll[i].setAttribute('v-on:click', "this.handleClick($event, '" + currNodeId + "')") // 为每个节点绑定点击事件
          let currNode = this.svgDom.getElementById(currNodeId)
        }
        //  设置 id 属性
        let gtag = this.svgDom.getElementsByTagName('g')
        //gtag[0].setAttribute("id", "svgcanvas");  //10.13修改

        /* 将svgDom对象转换成vue的虚拟dom */

        var oSerializer = new XMLSerializer()
        var sXML = oSerializer.serializeToString(this.svgDom)
        var Profile = Vue.extend({
          template: "<div id='svgTemplate' style='height:100%;background-color: #000;'>" + sXML + '</div>'
        })

        // 创建实例，并挂载到元素上
        new Profile().$mount('#svgTemplate')

        const elem = document.getElementById('iSTP')

        let zoomVal = 0 // 放大缩小累计值
        let zoomStepSize = 20 // 放大缩小每次改变的步长20
        let removeFlag = false // 控制点击拖动，区分未点击时的鼠标移动
        let zoomW = 41 // 初始值 > zoomStepSize * 2 初次滚动后即可得到准确的当前值
        let zoomH = 41 // 初始值 > zoomStepSize * 2 初次滚动后即可得到准确的当前值
        let zoomX = 0
        let zoomY = 0
        let startX = 0
        let startY = 0
        let endX = 0
        let endY = 0
        let moveX = 0
        let moveY = 0
        let vbCX = 0
        let vbCY = 0
        let vbCW = 0
        let vbCH = 0

        //svg标签
        let svgDom = document.getElementById('iSTP')
        svgDom.setAttribute('style', svgDom.getAttribute('style') + ';height: 100%;width: 100%;margin-right:1%;')
        d3.select('#iSTP').attr('transform', 'translate(0,0) scale(1.65)')
        d3.select('#iSTP').attr('style', 'background-color: rgb(0, 0, 0); border: 0px solid yellow;zoom:0.3')
        getCurrentVB()
        svgDom.addEventListener('mousedown', moveDownMouse)
        svgDom.addEventListener('mouseup', moveUpMouse)
        svgDom.addEventListener('mousemove', moveMouse)
        svgDom.addEventListener('mousewheel', MouseWheel)

        // 鼠标滚轮事件
        function MouseWheel(e) {
          //10.13修改缩放逻辑  按中心点缩放逻辑为（transform偏移量）*new_scale/scale+(newscale-scale)/scale*鼠标偏移量
          let ev = e || window.event
          let down = true

          var scale = parseFloat(d3.select('#iSTP').attr('transform').split('scale(')[1].split(')')[0])
          if (scale > 5) scale = 5
          if (scale < 0.5) scale = 0.5
          var new_scale = scale + event.wheelDelta / 1200
          if (new_scale > 5) new_scale = 5
          if (new_scale < 0.5) new_scale = 0.5

          // console.log((parseInt(d3.select('#iSTP').attr('transform').split('(')[1].split(')')[0].split(',')[0])))
          // console.log('clientx is'+event .clientX)
          // console.log(scale)
          // console.log(new_scale)
          // console.log(document.getElementById("svgTemplate").clientWidth/2)
          // console.log(document.getElementById("svgTemplate").getBoundingClientRect().left)
          // console.log(event .clientX)
          // console.log(parseInt(d3.select('#iSTP').attr('transform').split('(')[1].split(')')[0].split(',')[0]))
          // console.log(event .clientX)
          // console.log((event .clientX-document.getElementById("svgTemplate").getBoundingClientRect().left))
          // console.log((new_scale-scale)/scale*(event .clientX-document.getElementById("svgTemplate").getBoundingClientRect().left))
          // console.log((parseInt(d3.select('#iSTP').attr('transform').split('(')[1].split(')')[0].split(',')[0])-event .clientX*3.33333333333)/scale*new_scale)
          // var endX=(parseInt(d3.select('#iSTP').attr('transform').split('(')[1].split(')')[0].split(',')[0])-(event .clientX-document.getElementById("svgTemplate").getBoundingClientRect().left-document.getElementById("svgTemplate").clientWidth/2))/scale*new_scale
          // var endY=(parseInt(d3.select('#iSTP').attr('transform').split('(')[1].split(')')[0].split(',')[1])-(event .clientY-document.getElementById("svgTemplate").getBoundingClientRect().top-document.getElementById("svgTemplate").clientHeight/2))/scale*new_scale
          var endX = (new_scale / scale) * parseInt(d3.select('#iSTP').attr('transform').split('(')[1].split(')')[0].split(',')[0]) - (((new_scale - scale) / scale) * (event.clientX - document.getElementById('svgTemplate').getBoundingClientRect().left)) / 0.3
          var endY = (new_scale / scale) * parseInt(d3.select('#iSTP').attr('transform').split('(')[1].split(')')[0].split(',')[1]) - (((new_scale - scale) / scale) * (event.clientY - document.getElementById('svgTemplate').getBoundingClientRect().top)) / 0.3
          if (scale != 5 && new_scale != 5) d3.select('#iSTP').attr('transform', 'translate(' + endX + ',' + endY + ')' + '  scale(' + new_scale + ')')
          return false
        }
        function zoomIn() {
          if (zoomW > zoomStepSize * 2 && zoomH > zoomStepSize * 2) {
            zoomVal += zoomStepSize
            zoomTo('in')
          }
        }
        function zoomOut() {
          zoomVal -= zoomStepSize
          if (zoomVal >= -zoomStepSize * 11) {
            zoomTo('out')
          } else {
            zoomVal = -zoomStepSize * 11 // 最小缩至-220不能再缩了
          }
        }
        function zoomTo(flag) {
          // 变化之前获取当前viewBox的位置
          getCurrentVB()
          // *********** 放大缩小后的各值的计算 开始 ***********
          if (flag === 'in') {
            zoomX = vbCX + zoomStepSize
            zoomY = vbCY + zoomStepSize
            zoomW = vbCW - zoomStepSize * 2
            zoomH = vbCH - zoomStepSize * 2
          } else {
            zoomX = vbCX - zoomStepSize
            zoomY = vbCY - zoomStepSize
            zoomW = vbCW + zoomStepSize * 2
            zoomH = vbCH + zoomStepSize * 2
          }
          // *********** 放大缩小后的各值的计算 结束 ***********
          // 将计算的结果赋予viewBox刷新当前展示的视图位置
          // svgDom.setAttributeNS(null, 'viewBox', zoomX + ' ' + zoomY + ' ' + zoomW + ' ' + zoomH)
          // 变化之后获取当前viewBox的位置 保证了 vbCX vbCY vbCW vbCH始终为当前viewBox的值
          endZoom()
        }
        function endZoom() {
          getCurrentVB()
          // 视图发生系列缩放改变后最终的(x, y)坐标记录下来，用于放大后拖动
          endX = vbCX
          endY = vbCY
        }

        // 鼠标点击事件
        function moveDownMouse(evt) {
          const event = window.event || evt
          this.dragging = true

          that.offsetX_1 = event.clientX
          that.offsetY_1 = event.clientY
          that.offsetX_2 = event.clientX
          that.offsetY_2 = event.clientY
        }
        // 鼠标移动事件
        function moveMouse(evt) {
          const event = window.event || evt
          if (!this.dragging) {
            return
          }
          let nx = event.clientX
          let ny = event.clientY

          that.offsetX_2 = event.clientX
          that.offsetY_2 = event.clientY
        }
        // 鼠标点击后松开事件
        function moveUpMouse(evt) {
          this.dragging = false

          // svgDom.setAttributeNS(null, 'style', 'cursor: default')
          // 视图发生系列移动后最终的(x, y)坐标记录下来，用于放大后拖动
          {
            endX = parseInt(d3.select('#iSTP').attr('transform').split('(')[1].split(')')[0].split(',')[0]) + (that.offsetX_2 - that.offsetX_1) * 3

            endY = parseInt(d3.select('#iSTP').attr('transform').split('(')[1].split(')')[0].split(',')[1]) + (that.offsetY_2 - that.offsetY_1) * 3
          }
          var scale = parseFloat(d3.select('#iSTP').attr('transform').split('scale(')[1].split(')')[0])

          removeFlag = false

          d3.select('#iSTP').attr('transform', 'translate(' + endX + ',' + endY + ')' + '  scale(' + scale + ')')
        }

        // 获取当前视图VB的位置信息
        function getCurrentVB() {
          vbCX = parseFloat(svgDom.viewBox.animVal.x)
          vbCY = parseFloat(svgDom.viewBox.animVal.y)
          vbCW = parseFloat(svgDom.viewBox.animVal.width)
          vbCH = parseFloat(svgDom.viewBox.animVal.height)
        }
        // 绑定事件到dom节点，考虑到兼容性
        // function addEvent (obj, xEvent, fn) {
        //   if (obj.attachEvent) {
        //     obj.attachEvent('on' + xEvent, fn)
        //   }
        //   else {
        //     obj.addEventListener(xEvent, fn, false)
        //   }
        // }

        // console.log('###################################')
        // console.log(elem)
        // const panzoom = Panzoom(elem, {
        //   maxScale: 10
        // })
        // panzoom.pan(1360, 1360)
        // panzoom.zoom(1, { animate: true })

        // elem.parentElement.addEventListener('wheel', panzoom.zoomWithWheel)

        // this.$nextTick(console.log(d3.select("#S24_4")))
        // this.renderOneStationDevices(this.test_data)
        // this.renderSingleDevice(this.new_test_data)
        // this.renderTrainDevice(this.train_data)
        // this.renderTrainDevice(this.train_data_2)
        // this.renderTrainDevice(this.train_data_3)
        // Profile().$mount('#svgTemplate');
        // console.log(d3.select("#S24_4").selectAll('#reverse').attr('stroke', 'red'))
        // d3.select('template').select('div').select('el-card')
        //console.log(d3.select('template').select('div').select('el-card'))

        // d3.select('#svgTemplate').selectAll('g').select('#S24_4').selectAll('#reverse').attr(
        //   {stroke:'red'}
        // )

        // document.getElementById('svgTemplate').appendChild(this.svgDom)
        //  svg - g
        let svgcanvasDom = document.getElementById('svgcanvas')

        // this.allDom = svgcanvasDom.getElementsByTagName("a");

        // for(let i = 0; i < this.allDom.length; i++) {
        //   // console.log(this.allDom[i].childNodes,'childNodes');
        //   let curraNodeId = this.allDom[i].id // 当前a标签节点的id,我们可以根据id获取对应节点数据并将其渲染对应的font标签上
        //   // console.log(curraNodeId, '当前a标签下的节点id----->>>')
        //   if(this.allDom[i].childNodes.length) { // 如果a标签下还有子元素
        //     //  修改节点数据(a 标签里面有 font 标签 即节点的数据)
        //     let fontDom = this.allDom[i].getElementsByTagName("font");
        //     if(fontDom.length) {
        //       // 可以根据 curraNodeId 获取该节点对应的数据并渲染到font标签上
        //       fontDom[0].innerHTML = 'self'
        //     }

        //     //  修改图片(a 标签中有 image 标签 , 即节点图片)
        //     let imageDom = this.allDom[i].getElementsByTagName("image");
        //     if(imageDom.length) {
        //       imageDom[0].attributes['xlink:href'].value = ''
        //     }

        //     //  设置支路的移动动画 (有 getTotalLength 即为线节点)
        //     if(this.allDom[i].childNodes[0].getTotalLength) {
        //       // 使不同长度线路动画速度一致
        //       let length = this.allDom[i].childNodes[0].getTotalLength()
        //       let duration = length / 50
        //       let animationString = duration.toFixed(0) + "s " + "linear infinite hacvRun";
        //       // console.log(length, "length");
        //       this.allDom[i].childNodes[0].style.strokeDashoffset = length;
        //       this.allDom[i].childNodes[0].style.animation = animationString;
        //     }
        //   }
        // }
      }
    },

    // zoomimg(x, y) {
    //   // 放大缩小
    //   // 缩放事件绑定给svg,缩放结果设置给svg内部的g标签
    //   if (!x) {
    //     x = 0;
    //   }
    //   if (!y) {
    //     y = 0;
    //   }
    //   const svg = d3.select("svg");
    //   const g = d3.select("#svgcanvas");
    //   // console.log(svg, g, "in havcZooming");
    //   //节点的缩放
    //   function zoomActions() {
    //     // console.log(d3.event, '----->>>') // undefind
    //     // g.attr("transform", d3.event.transform);
    //     g.attr("transform", d3.zoomTransform(svg.node()));
    //   }
    //   let zoomHandler = d3.zoom().on("zoom", zoomActions).scaleExtent([0.5, 40]);

    //   // zoomHandler(svg)
    //   svg.call(zoomHandler);
    //   svg.transition().duration(750).call(zoomHandler.transform, d3.zoomIdentity.translate(-x, -y).scale(2));
    //   // // 点击按钮定位
    //   // d3.select("#reset").on("click", function () {
    //   //   svg
    //   //     .transition()
    //   //     .duration(750)
    //   //     .call(zoomHandler.transform, d3.zoomIdentity);
    //   // });
    //   // d3.select('#pos1').on('click',function(){
    //   //   svg.transition().duration(750).call(zoomHandler.transform, d3.zoomIdentity.translate(-10,-1500).scale(2));
    //   // });
    //   // d3.select('#pos2').on('click',function(){
    //   //   svg.transition().duration(750).call(zoomHandler.transform, d3.zoomIdentity.translate(-1200,-10).scale(2));
    //   // });
    // },
    stringToXml(xmlString) {
      let xmlDoc = null
      if (typeof xmlString == 'string') {
        //FF
        if (document.implementation.createDocument) {
          var parser = new DOMParser()
          xmlDoc = parser.parseFromString(xmlString, 'text/xml')
        } else if (window.ActiveXObject) {
          xmlDoc = new ActiveXObject('Microsoft.XMLDOM')
          xmlDoc.async = false
          xmlDoc.loadXML(xmlString)
        }
      } else {
        xmlDoc = xmlString
      }
      return xmlDoc
    },
    renderOneStationDevices(data, props) {
      try {
        for (const key in data.tracks) {
          this.trackRender(props.stationNo, key, data.tracks[key]) //2023_0119 去除dstate
        }
        // 信号机

        for (const key in data.signals) {
          this.signalRender(props.stationNo, key, data.signals[key])
        }
        // for (const key in data.signalStates) {
        //   const deviceObj = this.variables[data.stationNo][0][`S${data.stationNo}_${key}`]
        //   if (deviceObj) {
        //     deviceObj.value = data.signalStates[key]
        //     this.signalRender(deviceObj.svg, deviceObj.value, deviceObj.type)
        //   } else {
        //     console.log(`Cannot Find Device(stationNo:${data.stationNo} deviceName:${key} deviceType:signal) From svg.`)
        //   }
        // }
        // 道岔

        for (const key in data.switchs) {
          this.switchRender(props.stationNo, key, data.switchs[key]) //2023_0119 去除dstate
        }
        // 区段
        for (const key in data.trackStates) {
          const deviceObj = this.variables[props.stationNo][2][`S${props.stationNo}_${key}`]
          if (deviceObj) {
            deviceObj.value = data.trackStates[key]
            this.trackRender(deviceObj.svg, deviceObj.value)
          } else {
          }
        }
      } catch (error) {
        console.log(error)
      }
    },
    signalRender(stationNo, name, state) {
      let type
      const current_svg = '#S' + stationNo + '_' + name
      if (d3.select(current_svg)._groups[0][0]) {
        type = d3.select(current_svg).attr('class')
      } else return
      if (state == 0) {
        for (const c of colorClassArray) {
          d3.select(current_svg).classed('A' + c, false)
          d3.select(current_svg).classed('B' + c, false)
        }

        return
      }
      for (const c of colorClassArray) {
        d3.select(current_svg).classed('A' + c, false)
        d3.select(current_svg).classed('B' + c, false)
      }
      type = d3.select(current_svg).attr('class')
      if(state%256<16 && type === 'signal2')
      {
        if(state%256 == 2 ||state%256 == 3 ||state%256 == 5)
        {
          state = state + (state%256)*16 - state%256
          if(state/256>=1)
          state +=256
        }
      }
      let colorState, isBlink
      if (state & MASK_LAMP_CLOSE) {
        colorState = 0
        isBlink = false
        this.oneSignalRender(current_svg, colorState, isBlink, 'A')
        if (type === 'signal2') {
          this.oneSignalRender(current_svg, colorState, isBlink, 'B')
        }
      } else {
        colorState = state & MASK_LAMPA_COLOR
        if (state & MASK_LAMPA_BLINK) {
          isBlink = true
        } else {
          isBlink = false
        }
        this.oneSignalRender(current_svg, colorState, isBlink, 'A')
        if (type === 'signal2') {
          colorState = (state / 16) & MASK_LAMPA_COLOR
          if (state & MASK_LAMPB_BLINK) {
            isBlink = true
          } else {
            isBlink = false
          }
          this.oneSignalRender(current_svg, colorState, isBlink, 'B')
        }
      }
    },
    oneSignalRender(current_svg, colorState, isBlink, code) {
      for (const c of colorClassArray) {
        d3.select(current_svg).classed(code + c, false)
      }
      d3.select(current_svg).classed(code + colorClassArray[colorState], true)
      if (isBlink) {
        d3.select(current_svg).classed(code + 'Blink', true)
      } else {
        d3.select(current_svg).classed(code + 'Blink', false)
      }
    },
    switchRender(stationNo, name, state) {
      var current_svg = '#S' + stationNo + '_' + name
      current_svg = current_svg.replace(/\//g, '\\/')

      for (const s of switchClassArray) {
        d3.select(current_svg).classed(s, false)
      }
      for (const s of stateClassArray) {
        d3.select(current_svg).classed(s, false)
      }
      if (state == -1) {
        d3.select(current_svg).classed('None', true)
        return
      }
      let switchClass
      if (state & MASK_SWITCH_SPLIT) {
        switchClass = switchClassArray[2] // SiKai
        d3.select(current_svg).classed(switchClass, true)
      } else {
        if (state & MASK_SWITCH_NR) {
          switchClass = switchClassArray[1] // Reverse
        } else {
          switchClass = switchClassArray[0] // Normal
        }
        d3.select(current_svg).classed(switchClass, true)
      }
      let stateClass
      if (state & MASK_TRACK_OCCUPY) {
        stateClass = stateClassArray[1] // Occupy
      } else {
        if (state & MASK_TRACK_LOCK) {
          stateClass = stateClassArray[2] // Lock
        } else {
          stateClass = stateClassArray[0] // Free
        }
      }

      if (state == -1) {
        d3.select(current_svg).classed('None', true)
      } else d3.select(current_svg).classed(stateClass, true)
    },
    trackRender(stationNo, name, state) {
      var current_svg = '#S' + stationNo + '_' + name
      current_svg = current_svg.replace(/\//g, '\\/')

      for (const s of stateClassArray) {
        d3.select(current_svg).classed(s, false)
      }
      let stateClass
      if (state & MASK_TRACK_OCCUPY) {
        stateClass = stateClassArray[1] // Occupy
      } else {
        if (state & MASK_TRACK_LOCK) {
          stateClass = stateClassArray[2] // Lock
        } else {
          stateClass = stateClassArray[0] // Free
        }
      }
      if (state == -1) {
        d3.select(current_svg).classed('None', true)
      } else d3.select(current_svg).classed(stateClass, true)
    },
    renderTrainDevice(data) {
      var coverRoute_list = new Array()
      for (const c in data.coverRoute) {
        coverRoute_list[c] = '#S' + data.coverRoute[c].stationNo + '_' + data.coverRoute[c].dname
      }
      if (coverRoute_list.length != 0)
        if (this.train_list_stationmap.includes(data.deviceId)) {
          this.updateTrainPosition(coverRoute_list[data.end1.index], coverRoute_list[data.end2.index], data.deviceId, data, data.coverRoute[data.end1.index].dType, data.coverRoute[data.end2.index].dType)
        } else {
          this.createTrainPosition(coverRoute_list[data.end1.index], coverRoute_list[data.end2.index], data.deviceId, data, data.coverRoute[data.end1.index].dType, data.coverRoute[data.end2.index].dType)
          this.train_list_stationmap.push(data.deviceId)
        }
    },
    updateTrainPosition(position_1, position_2, deviceId, data, type_1, type_2) {
      position_1 = position_1.replace(/\//g, '\\/')
      if (this.train_lists[1] == deviceId) {
        this.selectChanged(deviceId)
      }
      var new_x1
      var old_1 = '#T' + deviceId + '_1'
      var old_2 = '#T' + deviceId + '_2'
      var old_train1 = '#T' + deviceId + '_text1'
      var old_train2 = '#T' + deviceId + '_text2'
      var old_train1_1 = '#T' + deviceId + '_text1_1'
      var old_train1_2 = '#T' + deviceId + '_text1_2'
      var old_train1_3 = '#T' + deviceId + '_text1_3'
      var old_train1_4 = '#T' + deviceId + '_text1_4'
      var old_train2_1 = '#T' + deviceId + '_text2_1'
      d3.select(old_1).remove()
      d3.select(old_train1).remove()
      d3.select(old_train2).remove()
      d3.select(old_train1_1).remove()
      d3.select(old_train1_2).remove()
      d3.select(old_train1_3).remove()
      d3.select(old_train1_4).remove()
      d3.select(old_train2_1).remove()
      d3.select(old_2).remove()
      var new_y1
      if (d3.select(position_1)._groups[0][0])
        if (type_1 === 'track') {
          var length = d3.select(position_1).select('#track').attr('length')
          var x1 = d3.select(position_1).select('#track').attr('x1')
          var y1 = d3.select(position_1).select('#track').attr('y1')
          var x2 = d3.select(position_1).select('#track').attr('x2')
          var y2 = d3.select(position_1).select('#track').attr('y2')
          new_x1 = parseInt(x1) + (parseInt(data.end1.offset) / parseInt(length)) * (parseInt(x2) - parseInt(x1))
          new_y1 = parseInt(y1) + (parseInt(data.end1.offset) / parseInt(length)) * (parseInt(y2) - parseInt(y1))
        } else {
          var dir_type = d3.select(position_1).attr('dir_type')
          if (data.coverRoute[data.end1.index].part == 'normal') {
            var length = d3.select(position_1).select('#normal').attr('length')
            var x1 = d3.select(position_1).select('#normal').attr('x1')
            var y1 = d3.select(position_1).select('#normal').attr('y1')
            var x2 = d3.select(position_1).select('#normal').attr('x2')
            var y2 = d3.select(position_1).select('#normal').attr('y2')
            if (dir_type == 3 || dir_type == 4) {
              new_x1 = parseInt(x1) + (parseInt(data.end1.offset) / parseInt(length)) * (parseInt(x2) - parseInt(x1))
              new_y1 = parseInt(y1) + (parseInt(data.end1.offset) / parseInt(length)) * (parseInt(y2) - parseInt(y1))
            } else {
              new_x1 = parseInt(x1) + ((parseInt(length) - parseInt(data.end1.offset)) / parseInt(length)) * (parseInt(x2) - parseInt(x1))
              new_y1 = parseInt(y1) + ((parseInt(length) - parseInt(data.end1.offset)) / parseInt(length)) * (parseInt(y2) - parseInt(y1))
            }
          } else if (data.coverRoute[data.end1.index].part == 'reverse') {
            var length = d3.select(position_1).select('#reverse').attr('length')
            var x1 = d3.select(position_1).select('#reverse').attr('x1')
            var y1 = d3.select(position_1).select('#reverse').attr('y1')
            var x2 = d3.select(position_1).select('#reverse').attr('x2')
            var y2 = d3.select(position_1).select('#reverse').attr('y2')
            if (dir_type == 3 || dir_type == 4) {
              new_x1 = parseInt(x1) + (parseInt(data.end1.offset) / parseInt(length)) * (parseInt(x2) - parseInt(x1))
              new_y1 = parseInt(y1) + (parseInt(data.end1.offset) / parseInt(length)) * (parseInt(y2) - parseInt(y1))
            } else {
              new_x1 = parseInt(x1) + ((parseInt(length) - parseInt(data.end1.offset)) / parseInt(length)) * (parseInt(x2) - parseInt(x1))
              new_y1 = parseInt(y1) + ((parseInt(length) - parseInt(data.end1.offset)) / parseInt(length)) * (parseInt(y2) - parseInt(y1))
            }
          } else if (data.coverRoute[data.end1.index].part == 'previous') {
            var length = d3.select(position_1).select('#common').attr('length')
            var x1 = d3.select(position_1).select('#common').attr('x1')
            var y1 = d3.select(position_1).select('#common').attr('y1')
            var x2 = d3.select(position_1).select('#common').attr('x2')
            var y2 = d3.select(position_1).select('#common').attr('y2')
            if (dir_type == 1 || dir_type == 2) {
              new_x1 = parseInt(x1) + (parseInt(data.end1.offset) / parseInt(length)) * (parseInt(x2) - parseInt(x1))
              new_y1 = parseInt(y1) + (parseInt(data.end1.offset) / parseInt(length)) * (parseInt(y2) - parseInt(y1))
            } else {
              new_x1 = parseInt(x1) + ((parseInt(length) - parseInt(data.end1.offset)) / parseInt(length)) * (parseInt(x2) - parseInt(x1))
              new_y1 = parseInt(y1) + ((parseInt(length) - parseInt(data.end1.offset)) / parseInt(length)) * (parseInt(y2) - parseInt(y1))
            }
          }
        }
      var trainumber
      if (data.upDownDir == 1 && this.station_rightIsDown[data.coverRoute[data.end1.index].stationNo] == false) trainumber = this.trainNolist[deviceId] + '->'
      else if (data.upDownDir == 2 && this.station_rightIsDown[data.coverRoute[data.end1.index].stationNo] == true) trainumber = this.trainNolist[deviceId] + '->'
      else if (data.upDownDir == 0) trainumber = this.trainNolist[deviceId]
      else trainumber = '<-' + this.trainNolist[deviceId]
      if (data.end1.offset >= 0) {
        d3.select('#iSTP')
          .append('polygon')
          .attr('id', 'T' + deviceId + '_1')

          .attr('points', parseInt(new_x1) + ',' + parseInt(new_y1) + ' ' + (parseInt(new_x1) + parseInt(8)) + ',' + (parseInt(new_y1) - parseInt(15)) + ' ' + (parseInt(new_x1) - parseInt(8)) + ',' + (parseInt(new_y1) - parseInt(15)))
          .attr('fill', 'yellow')
        y1 = parseInt(y1) - parseInt(15)
        new_x1 = parseInt(new_x1) - parseInt(15)
        if (data.upDownDir == 1) new_x1 = new_x1 + parseInt(0)
        if (data.upDownDir == 2) new_x1 = new_x1 - parseInt(15)
        new_y1 -= 28
        d3.select('#iSTP')
          .append('text')
          .attr('id', 'T' + deviceId + '_text1')
          .attr('x', new_x1)
          .attr('y', new_y1)
          .attr('font-family', '宋体')
          .attr('fill', 'yellow')
          .attr('font-size', '16')
          .attr('dominant-baseline', 'hanging')
          .text(trainumber)
      }
      //         if(data.end2.offset > 0 )
      //         {
      //  <polygon points="100,10 40,180 190,60 10,60 160,180" stroke="black" stroke-width="2" fill="red" />

      //            d3.select('#iSTP').append('polygon').attr('id','T'+deviceId+'_2')
      //             .attr('points',(parseInt(x2)+parseInt(data.end2.offset)+parseInt(3))+','+(parseInt(y2)-parseInt(10))+' '+(parseInt(x2)+parseInt(data.end2.offset))+','+parseInt(y2)+' '+(parseInt(x2)+parseInt(data.end2.offset)-parseInt(3))+','+(parseInt(y2)-parseInt(10)))
      //             .attr('fill','yellow').attr('opacity','0.6')
      //             y2=parseInt(y2)-parseInt(15)
      //           var new_x2=parseInt(x2)+parseInt(data.end2.offset)-parseInt(13)
      //           d3.select('#iSTP').append('text').attr('id','T'+deviceId+'_text2')
      //             .attr('x',new_x2).attr('y',y2)
      //             .attr('font-family','宋体').attr('fill','#ffffff')
      //             .attr('font-size','10').attr('dominant-baseline','hanging')
      //             .text('列车'+deviceId)

      //         }

      var topid
      topid = '#T' + deviceId + '_1'

      var mode_list = {
        0: '无法获取',
        1: '调车',
        2: '列车'
      }
      var upDownDir_list = {
        0: '未知',
        1: '上行',
        2: '下行',
        3: '无方向'
      }
      trainumber = this.trainNolist[deviceId]
      d3.select(topid)
        .on('mouseover', function (d, i) {
          // d3.select('#iSTP').append('div').attr('id','T'+deviceId+'_background')
          //   .attr('x',parseInt(new_x1)).attr('y',parseInt(y1)-parseInt(20))
          //   .attr('height','20px').attr('width','20px')
          //   .attr('background','white')
          d3.select('#iSTP')
            .append('div')
            .attr('id', 'T' + deviceId + '_text1_5')
            .attr('x', parseInt(new_x1))
            .attr('y', parseInt(y1) - parseInt(100))
            .attr('width', '100px')
            .attr('height', '100px')
            .attr('bakcground-color', 'white')
            .attr('dominant-baseline', 'hanging')

          d3.select('#iSTP')
            .append('text')
            .attr('id', 'T' + deviceId + '_text1_4')
            .attr('x', parseInt(new_x1))
            .attr('y', parseInt(y1) - parseInt(90))
            .attr('font-family', '宋体')
            .attr('fill', '#ffffff')
            .attr('font-size', '20')
            .attr('dominant-baseline', 'hanging')
            .text('机车号:' + trainumber)

          d3.select('#iSTP')
            .append('text')
            .attr('id', 'T' + deviceId + '_text1_1')
            .attr('x', parseInt(new_x1))
            .attr('y', parseInt(y1) - parseInt(30))
            .attr('font-family', '宋体')
            .attr('fill', '#ffffff')
            .attr('font-size', '20')
            .attr('dominant-baseline', 'hanging')
            .text('运行模式:' + mode_list[data.mode])

          d3.select('#iSTP')
            .append('text')
            .attr('id', 'T' + deviceId + '_text1_2')
            .attr('x', parseInt(new_x1))
            .attr('y', parseInt(y1) - parseInt(50))
            .attr('font-family', '宋体')
            .attr('fill', '#ffffff')
            .attr('font-size', '20')
            .attr('dominant-baseline', 'hanging')
            .text('速度:' + (data.speed * 36) / 1000 + 'km/h')

          d3.select('#iSTP')
            .append('text')
            .attr('id', 'T' + deviceId + '_text1_3')
            .attr('x', parseInt(new_x1))
            .attr('y', parseInt(y1) - parseInt(70))
            .attr('font-family', '宋体')
            .attr('fill', '#ffffff')
            .attr('font-size', '20')
            .attr('dominant-baseline', 'hanging')
            .text('上下行方向:' + upDownDir_list[data.upDownDir])
        })
        .on('mouseout', function (d, i) {
          var textid
          textid = '#T' + deviceId + '_text1_1'

          d3.select(textid).remove()
          textid = '#T' + deviceId + '_text1_2'
          d3.select(textid).remove()
          textid = '#T' + deviceId + '_text1_3'
          d3.select(textid).remove()
          textid = '#T' + deviceId + '_text1_4'
          d3.select(textid).remove()
        })

      var topid_2

      topid_2 = '#T' + deviceId + '_2'

      d3.select(topid_2)
        .on('mouseover', function (d, i) {
          d3.select('#iSTP')
            .append('text')
            .attr('id', 'T' + deviceId + '_text2_1')
            .attr('x', parseInt(new_x2))
            .attr('y', parseInt(y2) - parseInt(20))
            .attr('font-family', '宋体')
            .attr('fill', '#ffffff')
            .attr('font-size', '20')
            .attr('dominant-baseline', 'hanging')
            .text('TEST' + deviceId)
        })
        .on('mouseout', function (d, i) {
          var textid_2
          textid_2 = '#T' + deviceId + '_text2_1'

          d3.select(textid_2).remove()
        })
    },
    createTrainPosition(position_1, position_2, deviceId, data, type_1, type_2) {
      position_1 = position_1.replace(/\//g, '\\/')
      position_2 = position_2.replace(/\//g, '\\/')
      if (d3.select(position_1)._groups[0][0])
        if (type_1 === 'track') {
          var x1 = d3.select(position_1).select('#track').attr('x1')

          var y1 = d3.select(position_1).select('#track').attr('y1')
        } else {
          var x1 = d3.select(position_1).select('#normal').attr('x1')
          var y1 = d3.select(position_1).select('#normal').attr('y1')
        }
      if (d3.select(position_2)._groups[0][0])
        if (type_2 === 'track') {
          var x2 = d3.select(position_2).select('#track').attr('x1')
          var y2 = d3.select(position_2).select('#track').attr('y1')
        } else {
          var x2 = d3.select(position_2).select('#normal').attr('x1')
          var y2 = d3.select(position_2).select('#normal').attr('y1')
        }
      if (data.end1.offset > 0) {
        var new_x1 = parseInt(x1) + parseInt(data.end1.offset)

        d3.select('#iSTP')
          .append('polygon')
          .attr('id', 'T' + deviceId + '_1')
          .attr('points', new_x1 + ',' + parseInt(y1) + ' ' + (new_x1 + parseInt(3)) + ',' + (parseInt(y1) - parseInt(10)) + ' ' + (new_x1 - parseInt(3)) + ',' + (parseInt(y1) - parseInt(10)))
          .attr('fill', 'yellow')
          .attr('opacity', '0.6')

        y1 = parseInt(y1) - parseInt(15)
        new_x1 = parseInt(new_x1) - parseInt(13)
        d3.select('#iSTP')
          .append('text')
          .attr('id', 'T' + deviceId + '_text1')
          .attr('x', new_x1)
          .attr('y', y1)
          .attr('font-family', '宋体')
          .attr('fill', '#ffffff')
          .attr('font-size', '10')
          .attr('dominant-baseline', 'hanging')
          .text('机车' + this.trainNolist[deviceId])
      }

      // if(data.end2.offset > 0 )
      // {
      //   var new_x2=parseInt(x2)+parseInt(data.end2.offset)
      //  d3.select('#iSTP').append('polygon').attr('id','T'+deviceId+'_2')
      //     .attr('points',new_x2+','+parseInt(y2)+' '+(new_x2+parseInt(3))+','+(parseInt(y2)-parseInt(10))+' '+(new_x2-parseInt(3))+','+(parseInt(y2)-parseInt(10)))
      //     .attr('fill','yellow').attr('opacity','0.6')

      //   y2=parseInt(y2)-parseInt(15)
      //   new_x2=parseInt(new_x2)-parseInt(13)
      //   d3.select('#iSTP').append('text').attr('id','T'+deviceId+'_text2')
      //     .attr('x',new_x2).attr('y',y2)
      //     .attr('font-family','宋体').attr('fill','#ffffff')
      //     .attr('font-size','10').attr('dominant-baseline','hanging')
      //     .text('列车'+deviceId)
      // }
      var topid
      var mode_list = {
        0: '无法获取',
        1: '列车模式',
        2: '调车模式'
      }
      var upDownDir_list = {
        0: '未知',
        1: '上行',
        2: '下行',
        3: '无方向'
      }
      topid = '#T' + deviceId + '_text1'

      d3.select(topid)
        .on('mouseover', function (d, i) {
          d3.select('#iSTP')
            .append('text')
            .attr('id', 'T' + deviceId + '_text1_1')
            .attr('x', parseInt(new_x1))
            .attr('y', parseInt(y1) - parseInt(20))
            .attr('font-family', '宋体')
            .attr('fill', '#ffffff')
            .attr('font-size', '20')
            .attr('dominant-baseline', 'hanging')
            .text('运行模式:' + mode_list[data.mode])

          d3.select('#iSTP')
            .append('text')
            .attr('id', 'T' + deviceId + '_text1_2')
            .attr('x', parseInt(new_x1))
            .attr('y', parseInt(y1) - parseInt(40))
            .attr('font-family', '宋体')
            .attr('fill', '#ffffff')
            .attr('font-size', '20')
            .attr('dominant-baseline', 'hanging')
            .text('速度:' + (data.speed * 36) / 1000 + 'km/h')

          d3.select('#iSTP')
            .append('text')
            .attr('id', 'T' + deviceId + '_text1_3')
            .attr('x', parseInt(new_x1))
            .attr('y', parseInt(y1) - parseInt(60))
            .attr('font-family', '宋体')
            .attr('fill', '#ffffff')
            .attr('font-size', '20')
            .attr('dominant-baseline', 'hanging')
            .text('上下行方向:' + upDownDir_list[data.upDownDir])
        })
        .on('mouseout', function (d, i) {
          var textid
          textid = '#T' + deviceId + '_text1_1'

          d3.select(textid).remove()
          textid = '#T' + deviceId + '_text1_2'
          d3.select(textid).remove()
          textid = '#T' + deviceId + '_text1_3'
          d3.select(textid).remove()
        })

      // var topid_2;
      // topid_2='#T'+deviceId+'_2'
      // console.log(d3.select(topid_2))
      //     d3.select(topid_2)
      //         .on("mouseover",function(d,i){
      //            console.log('&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&')
      //           d3.select('#iSTP').append('text').attr('id','T'+deviceId+'_text2_1')
      //             .attr('x',parseInt(new_x2)).attr('y',parseInt(y2)-parseInt(20))
      //             .attr('font-family','宋体').attr('fill','#ffffff')
      //             .attr('font-size','20').attr('dominant-baseline','hanging')
      //             .text('TEST'+deviceId)
      //         })
      //         .on("mouseout",function(d,i){
      //                                   var textid_2
      //         textid_2='#T'+deviceId+'_text2_1'
      //         console.log(d3.select(textid_2))
      //             d3.select(textid_2)
      //                 .remove();
      //         })
    },

    TrainDevices(data) {
      try {
        const trainobj = this.variables[data.deviceId][data.type][`S${data.deviceId}_${data.deviceType}`]
        const deviceObj1 = this.variables[data.stationNo][data.type][`S${data.stationNo}_${data.dname}`]
        const deviceObj2 = this.variables[data.stationNo][data.type][`S${data.stationNo}_${data.dname}`]
        const offsetX1 = data.end1.offsetX
        const offsetX2 = data.end2.offsetX
        if (trainobj) {
          this.trainender(trainobj.svg, deviceObj1.svg, deviceObj2.svg, offsetX1, offsetX2)
        } else {
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>
<style>
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes run {
  from {
    stroke-dasharray: 10, 5;
  }
  to {
    stroke-dasharray: 40, 5;
  }
}

@keyframes hacvRun {
  from {
    stroke-width: 6;
    /* stroke-dashoffset: 0; */
    stroke-dasharray: 10, 8;
  }
  to {
    stroke-width: 6;
    stroke-dashoffset: 0;
    stroke-dasharray: 10, 8;
  }
}
</style>


<style lang="less" >
@red: #f00;
@green: #0f0;
@yellow: #ff0;
@white: #fff;
@blue: #00f;
@gray: #808080;
@noneGray: #404040;
@trackFreeBlue: #5578b6;

@keyframes signalBlink2 {
  0% {
    opacity: 1;
  }
  60% {
    fill: @noneGray;
    stroke: @noneGray;
  }
  100% {
    fill: @noneGray;
    stroke: @noneGray;
  }
}

@keyframes switchBlink {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes workAreaBlink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.track.Occupy {
  #track {
    stroke: @red;
  }
}
.track.Free {
  #track {
    stroke: @trackFreeBlue;
  }
}
.track.Lock {
  #track {
    stroke: @white;
  }
}
.track.None {
  #track {
    stroke: @noneGray;
  }
}

.switch.Normal {
  #switchLabel {
    fill: @green;
  }
  #switchNormal {
    stroke-opacity: 1;
  }
  #switchReverse {
    stroke-opacity: 0;
  }
}
.switch.Normal.Free {
  #common {
    stroke: @trackFreeBlue;
  }
  #switchNormal {
    stroke: @trackFreeBlue;
  }
  #normal {
    stroke: @trackFreeBlue;
  }
  #reverse {
    stroke: @trackFreeBlue;
  }
}
.switch.Normal.Occupy {
  #common {
    stroke: @red;
  }
  #switchNormal {
    stroke: @red;
  }
  #normal {
    stroke: @red;
  }
  #reverse {
    stroke: @trackFreeBlue;
  }
}
.switch.Normal.Lock {
  #common {
    stroke: @white;
  }
  #switchNormal {
    stroke: @white;
  }
  #normal {
    stroke: @white;
  }
  #reverse {
    stroke: @trackFreeBlue;
  }
}
.switch.Reverse {
  #switchLabel {
    fill: @yellow;
  }
  #switchNormal {
    stroke-opacity: 0;
  }
  #switchReverse {
    stroke-opacity: 1;
  }
}
.switch.Reverse.Free {
  #common {
    stroke: @trackFreeBlue;
  }
  #switchReverse {
    stroke: @trackFreeBlue;
  }
  #reverse {
    stroke: @trackFreeBlue;
  }
  #normal {
    stroke: @trackFreeBlue;
  }
}
.switch.Reverse.Occupy {
  #common {
    stroke: @red;
  }
  #switchReverse {
    stroke: @red;
  }
  #reverse {
    stroke: @red;
  }
  #normal {
    stroke: @trackFreeBlue;
  }
}
.switch.Reverse.Lock {
  #common {
    stroke: @white;
  }
  #switchReverse {
    stroke: @white;
  }
  #reverse {
    stroke: @white;
  }
  #normal {
    stroke: @trackFreeBlue;
  }
}
.switch.SiKai {
  #switchLabel {
    fill: @white;
    animation: switchBlink 1.2s infinite cubic-bezier(0, -0.5, 1, -0.5);
  }
  #switchNormal,
  #switchReverse {
    stroke-opacity: 0;
  }
  #common {
    stroke: @trackFreeBlue;
  }
  #reverse {
    stroke: @trackFreeBlue;
  }
  #normal {
    stroke: @trackFreeBlue;
  }
}
.switch.SiKai.Occupy {
  #switchLabel {
    fill: @white;
    animation: switchBlink 1.2s infinite cubic-bezier(0, -0.5, 1, -0.5);
  }
  #switchNormal,
  #switchReverse {
    stroke-opacity: 0;
  }
  #common {
    stroke: @red;
  }
  #reverse {
    stroke: @trackFreeBlue;
  }
  #normal {
    stroke: @trackFreeBlue;
  }
}
.switch.SiKai.Lock {
  #switchLabel {
    fill: @white;
    animation: switchBlink 1.2s infinite cubic-bezier(0, -0.5, 1, -0.5);
  }
  #switchNormal,
  #switchReverse {
    stroke-opacity: 0;
  }
  #common {
    stroke: @white;
  }
  #reverse {
    stroke: @trackFreeBlue;
  }
  #normal {
    stroke: @trackFreeBlue;
  }
}
.signal1.ANone {
  #SignalBase {
    stroke: @noneGray;
  }
  #SignalA {
    stroke: @noneGray;
    fill: @noneGray;
  }
}
.signal1.ARed {
  #SignalBase {
    stroke: @gray;
  }
  #SignalA {
    stroke: @red;
    fill: @red;
  }
}
.signal1.AGreen {
  #SignalBase {
    stroke: @gray;
  }
  #SignalA {
    stroke: @green;
    fill: @green;
  }
}
.signal1.AYellow {
  #SignalBase {
    stroke: @gray;
  }
  #SignalA {
    stroke: @yellow;
    fill: @yellow;
  }
}
.signal1.AWhite {
  #SignalBase {
    stroke: @gray;
  }
  #SignalA {
    stroke: @white;
    fill: @white;
  }
}
.signal1.ABlue {
  #SignalBase {
    stroke: @gray;
  }
  #SignalA {
    stroke: @blue;
    fill: @blue;
  }
}
.signal1.AGray {
  #SignalBase {
    stroke: @gray;
  }
  #SignalA {
    stroke: @gray;
    fill: @gray;
  }
}
.signal2.ANone {
  #SignalBase {
    stroke: @noneGray;
  }
  #SignalA {
    stroke: @noneGray;
    fill: @noneGray;
  }
}
.signal2.ARed {
  #SignalBase {
    stroke: @gray;
  }
  #SignalA {
    stroke: @red;
    fill: @red;
  }
}
.signal2.AGreen {
  #SignalBase {
    stroke: @gray;
  }
  #SignalA {
    stroke: @green;
    fill: @green;
  }
}
.signal2.AYellow {
  #SignalBase {
    stroke: @gray;
  }
  #SignalA {
    stroke: @yellow;
    fill: @yellow;
  }
}
.signal2.AWhite {
  #SignalBase {
    stroke: @gray;
  }
  #SignalA {
    stroke: @white;
    fill: @white;
  }
}
.signal2.ABlue {
  #SignalBase {
    stroke: @gray;
  }
  #SignalA {
    stroke: @blue;
    fill: @blue;
  }
}
.signal2.AGray {
  #SignalBase {
    stroke: @gray;
  }
  #SignalA {
    stroke: @gray;
    fill: @gray;
  }
}
.signal2.BNone {
  #SignalBase {
    stroke: @noneGray;
  }
  #SignalB {
    stroke: @noneGray;
    fill: @noneGray;
  }
}
.signal2.BRed {
  #SignalBase {
    stroke: @gray;
  }
  #SignalB {
    stroke: @red;
    fill: @red;
  }
}
.signal2.BGreen {
  #SignalBase {
    stroke: @gray;
  }
  #SignalB {
    stroke: @green;
    fill: @green;
  }
}
.signal2.BYellow {
  #SignalBase {
    stroke: @gray;
  }
  #SignalB {
    stroke: @yellow;
    fill: @yellow;
  }
}
.signal2.BWhite {
  #SignalBase {
    stroke: @gray;
  }
  #SignalB {
    stroke: @white;
    fill: @white;
  }
}
.signal2.BBlue {
  #SignalBase {
    stroke: @gray;
  }
  #SignalB {
    stroke: @blue;
    fill: @blue;
  }
}
.signal2.BGray {
  #SignalBase {
    stroke: @gray;
  }
  #SignalB {
    stroke: @gray;
    fill: @gray;
  }
}
.signal1.ABlink {
  #SignalA {
    animation: signalBlink2 1.2s infinite cubic-bezier(0, -0.5, 1, -0.5);
  }
}
.signal2.ABlink {
  #SignalA {
    animation: signalBlink2 1.2s infinite cubic-bezier(0, -0.5, 1, -0.5);
  }
}
.signal2.BBlink {
  #SignalB {
    animation: signalBlink2 1.2s infinite cubic-bezier(0, -0.5, 1, -0.5);
  }
}

.workAreaLine {
  animation: workAreaBlink 2s infinite ease-in-out;
}
</style>

<style lang="less" scoped>
@red: #f00;
@green: #0f0;
@yellow: #ff0;
@white: #fff;
@blue: #00f;
@gray: #808080;
@noneGray: #404040;
@trackFreeBlue: #5578b6;

@keyframes signalBlink2 {
  0% {
    opacity: 1;
  }
  60% {
    fill: @noneGray;
    stroke: @noneGray;
  }
  100% {
    fill: @noneGray;
    stroke: @noneGray;
  }
}

@keyframes switchBlink {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes workAreaBlink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.svgText {
  pointer-events: none;
}
.box-card {
  background-color: transparent;
  .map-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    width: 100%;
    // background-color: green;
    .el-divider {
      font-size: 40px;
    }
    .trail-box {
      display: flex;
      align-items: center;
      height: 100%;
      color: #fff;
      width: 400px;
      // background-color: yellow;
    }
    .station-choose {
      height: 100%;
      width: 700px;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #909399;
      .prev-station {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 100%;
        width: 200px;
        cursor: pointer;
        // background-color: blue;
      }
      .cur-station {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 300px;
        font-size: 28px;
        font-weight: 700;
        color: #23272b;
        cursor: pointer;
        // background-color: yellow;
      }
      .next-station {
        display: flex;
        align-items: center;
        height: 100%;
        width: 200px;
        cursor: pointer;
        // background-color: purple;
      }

      // background-color: red;
    }
    .zoom-box {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      color: #fff;
      height: 100%;
      width: 400px;
      // background-color: pink;
    }
  }
  .map-body {
    height: 640px;
    width: 100%;
  }
  .map-box {
    // height: 1020px;
    height: 100%;
    width: 100%;
  }
}

.btn-area {
  background-color: #fff;
  width: 60%;
  min-width: 370px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.btn-area button {
  border: 1px solid #ddd;
  background-color: #00b0f0;
  padding: 5px 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: #fff;
  margin-right: 5px;
}

.btn-area button:focus {
  outline: none;
  background-color: #23c7f0;
}
</style>
